<template>
  <!-- 收款二维码 -->
  <div class="code column-center">
    <van-swipe style="width:296px;" :show-indicators="false" :touchable="false" ref="reference">
      <van-swipe-item v-for="(item,index) in list" :key="index" class="flex-column">
        <div
          class="column-center"
          style="height:330px;background-color:#22AB39;color:#fff;letter-spacing: 1px;text-align:center;"
        >
          <p style="font-size:22px;margin-bottom:18px;margin-top:0;">
            推荐使用
            <span style="font-weight:600">微信支付</span>
          </p>
          <van-image :src="item.QRCode" width="170" height="170"></van-image>
          <p>{{item.payeeName}}</p>
        </div>
        <div class="row-center" style="height:75px;border:0.5px solid rgba(16, 16, 16, 0.1);">
          <van-icon name="wechat" size="50" color="#22AB39" />
          <span style="font-size:28px;font-weight:350;">微信支付</span>
        </div>
        <div class="flex-column" style="padding:16px;">
          <p class="p-info">收款人：{{item.payeeName}}</p>
          <p class="p-info">联系方式：{{item.telephone}}</p>
          <p class="p-info">收款说明：{{item.collection_explain}}</p>
        </div>
      </van-swipe-item>
    </van-swipe>

    <van-button
      color="#59BDC3"
      round
      size="small"
      style="width:107px;height:36px;margin-top:25px;"
      @click="toNext"
    >切换</van-button>
  </div>
</template>

<script>
import { getReceiveQRcode } from "@/api/order";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      list: [
        {
          payeeName: "小明",
          telephone: "13794247588",
          collection_explain: "支付宝",
          QRCode:
            "https://localhost:44352/photo/showReceive_QRcode/5729247387924771.jpg"
        },
        {
          payeeName: "小明",
          telephone: "13794247588",
          collection_explain: "微信",
          QRCode:
            "https://localhost:44352/photo/showReceive_QRcode/5720887691088741.jpg"
        }
      ]
    };
  },
  methods: {
    toNext() {
      console.log(this.$refs.reference);
      this.$refs.reference.next();
    }
  },
  async created() {
    const course_id = this.$route.params.course_id
    const result = await getReceiveQRcode({
      phoneNumber: this.phone,
      campusID: this.campusID,
      courseID:course_id
    });
    if (result.result == "OK") {
      this.list = result.data;
    }
  },
  computed: {
    ...mapGetters({ phone: "getPhone", campusID: "getCampusID" })
  }
};
</script>

<style scoped>
.code {
  background-color: #fff;
  position: fixed;
  width: 100%;
  height: 100%;
}
.p-info {
  opacity: 0.65;
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  margin: 0;
  line-height: 28px;
}
</style>